<template>
  <div  class="xuanze">
    <div class="t">
      <div class="t1"></div>
      <van-nav-bar
      class="t2"
        title="选择咖啡"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <van-tabs v-model="activeName" line-height="0" title-active-color="skyblue">
      <van-tab title="赠送中(1杯)" name="a">
      <div class="bot">
        <div class="gong">
          <p>共1杯</p>
          <p>2019-01-07 12:32</p>
        </div>

        <div class="b1">
          <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B1全国通用</span>
            <p>期限：2018.12.25-2021.12.24</p>
          </div>
        </div>

        <div class="quxiao">
          <p>取消转赠</p>
        </div>
    </div>
      </van-tab>
      <van-tab title="已赠送(2杯)" name="b">
        <div class="bot">
          <div class="gong">
            <p>共1杯</p>
            <p>2019-01-07 12:32</p>
          </div>

          <div class="b1">
            <div class="b11">
              ￥<span>21</span>
            </div>
            <div class="b12">
              <span>B1全国通用</span>
              <p>期限：2018.12.25-2021.12.24</p>
            </div>
          </div>
        </div>

        <div class="bot">
          <div class="gong">
            <p>共1杯</p>
            <p>2019-01-07 12:32</p>
          </div>

          <div class="b1">
            <div class="b11">
              ￥<span>21</span>
            </div>
            <div class="b12">
              <span>B2全国通用</span>
              <p>期限：2018.12.25-2021.12.24</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已收到(0杯)" name="c" class="yi">
        <div class="tu">
          <img src="http://www.sunlulu.club/img/zwzzjl.png" alt="">
          <p>暂无转账记录</p>
        </div>
      </van-tab>
    </van-tabs>


  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'a'
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({name:'QingKe'});
    }
  }
}
</script>


<style scoped>
.xuanze{
  width: 100%;
  height: 100%;
  background-color:ghostwhite;
}
.t{
  height: 64px;
  background: white;
}
.t1{
  height: 20px;
}
.t2{
  height: 44px;
  border-bottom: solid 1px gainsboro;
}

.top{
  height: 80px;
}
.top p{
  color: skyblue;
}
.top p,.top1 p{
  margin: 0;
  font-size: 15px;
}
.top span{
  font-size: 12px;
  color: grey;
}
.bot{
  height: 180px;
  background: white;
  margin-top: 15px;
  padding: 15px;
}
.bot p{
  margin: 0;
  font-size: 15px;
}
.gong p{
  color:grey;
  line-height: 40px;
}
.gong{
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.b1{
   height: 80px;
   color: rgba(80, 80, 80, 1);
	 background-color: rgba(255, 255, 255, 1);
	 box-shadow: rgba(242, 242, 242, 1) solid 1px;
	 font-size: 12px;
   display: flex;
   /* line-height: 60px; */
   margin: 10px 0;
   border:solid 1px ghostwhite;
}
.b11{
  margin-left: 15px;
  width: 50px;
  line-height: 80px;
}
.b11 span{
  font-size: 23px;
}
.b12{
margin-left: 20px;
}
.b12 p{
  margin: 10px 0;
  font-size: 12px;
}
.b1 .b12 span{
  display: block;
  margin-top: 15px;
  font-weight: bold;
  font-size: 16px;
}
.quxiao{
  height: 36px;
  border:solid 2px paleturquoise;
  border-radius: 10px;
}
.quxiao p{
  margin: 0;
  text-align: center;
  line-height: 36px;
  color :skyblue;
}
.tu{
  width: 375px;
  height: 558px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
.tu img{
  width: 60px;
  height: 80px;
}
</style>
